<template>
  <div>
    case1: <input  v-model="message" type="text" />
    <hr>
    case2: <input  v-model="message2" type="text" />
    <hr>
    <button @click="stopWatch">停止监听</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
let message = ref<string>('飞机');
let message2 = ref<string>('飞机毯子');

const stop = watchEffect((oninvalidate)=> {
  console.log("message===", message.value);
  console.log("message2===", message2.value);
  oninvalidate(()=> {
    console.log('before');
  })
},{
  flush: 'post',
  onTrigger(e) {
    debugger;
  }
})

const stopWatch = () => stop(); 

</script>